<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>GIS开发利用html5获取经纬度并在百度地图中查看</title>
<!--加载百度 map api-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>  
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
</head>
<body>
<span id="support">将下面的经纬度输入谷歌地图：</span>
<div id="show">
纬度：<span id="latitude">38.3415863382</span><br />
经度：<span id="longitude">94.3505992241</span><br />
准确度：<span id="accuracy"></span>
</div>
<div id="map_canvas" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var doc = document,
    latitude = doc.getElementById('latitude'),
    longitude = doc.getElementById('longitude'),
    accuracy = doc.getElementById('accuracy'),
    support = doc.getElementById('support'),
    showDiv = doc.getElementById('show');
var map = new BMap.Map("map_canvas");
function lodeSupport(){
    if(navigator.geolocation){
        support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';
        showDiv.style.display = 'block';
        navigator.geolocation.getCurrentPosition(updataPosition);
    }else{
        support.innerHTML = '对不起，浏览器不支持！';
        showDiv.style.display = 'none';
    }
}
function updataPosition(position){
    var latitudeP = position.coords.latitude,
        longitudeP = position.coords.longitude,
        accuracyP = position.coords.accuracy;
    latitude.innerHTML = latitudeP;
    longitude.innerHTML = longitudeP;
    accuracy.innerHTML = accuracyP;
	//在百度 map中显示地址
	
	var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标  
	map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别  
	var marker = new BMap.Marker(point);    
	map.addOverlay(marker); 
	BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标
	
}
//坐标转换完之后的回调函数
function translateCallback(point1){
	
    var marker1 = new BMap.Marker(point1);
    map.addOverlay(marker1);
    var label = new BMap.Label("转换后的百度坐标",{offset:new BMap.Size(20,-10)});
    marker1.setLabel(label); //添加百度label
    map.setCenter(point1);
    
}

window.addEventListener('load', lodeSupport , true);
</script>
</body>
</html>


